<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Marvin JS Example - Toolbars</title>
	<link type="text/css" rel="stylesheet" href="../css/doc.css" />
	<link type="text/css" rel="stylesheet" href="../js/lib/rainbow/github.css" />
	<script src="../js/lib/jquery-1.9.1.min.js"></script>
	<script src="../js/lib/rainbow/rainbow-custom.min.js"></script>
	<script src="../gui/lib/promise-1.0.0.min.js"></script>
	<script src="../js/marvinjslauncher.js"></script>
	<script>
		$(document).ready(function handleDocumentReady (e) {
			initControls();
		});

		function initControls () {
			// bind event listener to all radio buttons from layout-group
			$("input[name='layout-group']").change(function(e) {
				var s = $(this).val();
				reload(s);
			});
		}
		
		function reload(layout) {
			$("#sketch").attr("data-toolbars", layout);
			$("#sketch")[0].contentWindow.location.reload(true);
		}

	</script>
</head>
<body>
	<h1>Marvin JS Example - Toolbars</h1>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
	<div class="darkbox">
		<div style="padding-bottom: 0.8em;">
			<input type="radio" name="layout-group" value="standard" checked>Standard</input>
			<input type="radio" name="layout-group" value="education">Education</input>
			<input type="radio" name="layout-group"  value="reaction">Reaction</input>
			<input type="radio" name="layout-group"  value="markush">Markush</input>
			<input type="radio" name="layout-group"  value="search">Search</input>
			<input type="radio" name="layout-group"  value="basicSearch">Basic Search</input>
			<input type="radio" name="layout-group" value="reporting">Reporting</input>
		</div>
		<div class="resizable">
			<iframe src="../editorws.html" id="sketch" class="sketcher-frame" data-toolbars="standard"></iframe>
		</div>
	</div>

	<div>
		<p>In this example, the sketcher is initalized with the <strong>standard</strong> toolbars.</p>
		<p>This layout setting is defined in the <strong>data-toolbars</strong> attribute of the <code>iframe</code>, which loads the editor.</p>
		<pre><code data-language="html">&lt;div class=&quot;resizable&quot;&gt;
&lt;iframe src="../editorws.html" id="sketch" class="sketcher-frame" data-toolbars="standard"&gt;&lt;/iframe&gt;
&lt;/div&gt;</code></pre>
		<p>Further presets are enumerated above the sketcher. To switch another layout, select its radio button.
		It triggers the reload of the iframe with the new setting. 
		If you select the <em>Markush</em> layout, the editor will be reloaded with the <em>Markush</em> layout</code>.</p>
		<p>When you take a look at the source code, you can see that a listener function is bind to the change events of radio buttons.
		When a change event is invoked, the value of <strong>data-toolbars</strong> attribute of the <code>iframe</code> tag is overwritten
		with the selected value and the reload of the iframe is triggered.</p>
		<p><pre><code data-language="html">
		$(document).ready(function handleDocumentReady (e) {
			initControls();
		});

		function initControls () {
			// bind event listener to all radio buttons from layout-group
			$("input[name='layout-group']").change(function(e) {
				var s = $(this).val();
				reload(s);
			});
		}
		
		function reload(layout) {
			$("#sketch").attr("data-toolbars", layout);
			$("#sketch")[0].contentWindow.location.reload(true);
		}</code></pre>
		</p>
	</div>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
</body>
</html>
